<template>
  <div class="app-container">
    链接到各种示例模板
    <el-row :gutter="12">
      <el-col :span="6" v-for="(item, index) in list" :key="index">
        <router-link :to="item.path">
          <el-dropdown-item>{{ item.title }}</el-dropdown-item>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link to="/example/form/media">
          <el-dropdown-item>多媒体表单</el-dropdown-item>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link to="/example/form/verification">
          <el-dropdown-item>表单验证</el-dropdown-item>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link to="/example/table/table-list/index">
          <el-dropdown-item>店滴列表数据+检索+分页</el-dropdown-item>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link to="/example/table">
          <el-dropdown-item>传统列表数据+检索+分页</el-dropdown-item>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link to="/example/table/table-list/view">
          <el-dropdown-item>详情</el-dropdown-item>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          path: "/views/example/index",
          title: "开发示例首页",
        },
        {
          path: "/example/guide/index",
          title: "示例Guide",
        },
        {
          path: "/example/permission/page",
          title: "Page Permission",
        },
        {
          path: "/example/permission/directive",
          title: "Directive Permission",
        },
        {
          path: "/example/permission/role",
          title: "Role Permission",
        },
        {
          path: "/example/icons/index",
          title: "Icons",
        },
        {
          path: "/example/base-page/index",
          title: "开发示例",
        },
        {
          path: "/example/base-page/create",
          title: "Create Article",
        },
        {
          path: "/example/base-page/edit/:id(\\d+)",
          title: "Edit Article",
        },
        {
          path: "/example/base-page/list",
          title: "Article List",
        },
        {
          path: "/example/tab/index",
          title: "Tab",
        }
      ]
    }
  },
  created() {},
  methods: {},
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>